<template>
	<div class="tabbar-container">
		<div v-if="props.data && props.data.length > 0" class="tabbar-con">
			<div class="tabbar-item-container" v-for="item in props.data" :key="item.id">
				<div class="tabbar-item-icon">
					<img class="tabbar-item-image" :src="item.icon" alt="" v-if="item.icon" />
					<div class="image-null" v-else>
						<el-icon>
							<Picture />
						</el-icon>
					</div>
				</div>
				<div class="tabbar-item-title" :style="{ color: item.textColor }">{{ item.title }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	className: {
		type: Object,
		default: () => {},
	},
});
</script>

<style lang="scss" scoped>
.tabbar-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 12px;

	.tabbar-con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tabbar-item-container {
		width: 60px;
		height: 45px;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: center;

		.tabbar-item-icon {
			width: 22px;
			height: 22px;

			.tabbar-item-image {
				width: 100%;
				height: 100%;
				margin-bottom: 0;
			}
			.image-null {
				width: 100%;
				height: 100%;
				font-size: 27px;
				scrollbar-width: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #c1c1c1;
			}
		}

		.tabbar-item-title {
			width: 100%;
			text-align: center;
		}
	}
}
</style>
